<script setup lang="ts">
defineProps<{
  isEditing: boolean
}>()

const value = defineModel<string>()
</script>

<template>
  <div
    :contenteditable="isEditing"
    class="def-editable-height"
    :class="{ 'editable-mode': isEditing, 'has-editable-height': value }"
  >
    {{ value }}
  </div>
</template>

<style lang="scss">
.def-editable-height {
  height: 0;
  line-height: 0;
}

.has-editable-height {
  height: 24px;
  line-height: 24px;
}

.editable-mode {
  height: 24px;
  line-height: 24px;
  box-shadow: 0 0 0 1px #409eff; /* 编辑状态显示虚线边框 */
  background-color: #fafafa;
  cursor: text;
  outline: none; /* 去掉默认的高亮边框 */
}
</style>
